<script lang="ts" setup>
import OnlyOfficeDemo from "../../../components/OnlyOfficeDemo.vue";
import Compare from "../../../components/word/Compare.vue";
import InsertFile from "../../../components/word/InsertFile.vue";
import ContentControllDemo from "../../../components/word/ContentControllDemo.vue";
import BookmarkFormDemo from "../../../components/word/BookmarkFormDemo.vue";
import ContextMenu from "../../../components/word/ContextMenu.vue";
import ToolbarMenu from "../../../components/word/ToolbarMenu.vue";
import ClickHyperlinkDemo from "../../../components/word/ClickHyperlinkDemo.vue";
import ClickBookmarkDemo from "../../../components/word/ClickBookmarkDemo.vue";
import InsertBookmarkDemo from "../../../components/word/InsertBookmarkDemo.vue";
import DownloadDemo from "../../../components/word/DownloadDemo.vue";
import ParagraphLock from "../../../components/word/ParagraphLock.vue";
import ParagraphMark from "../../../components/word/ParagraphMark.vue";
import ReviewReport from "../../../components/word/ReviewReport.vue";
import Zoom from "../../../components/word/Zoom.vue";
import PrintDocDemo from "../../../components/word/PrintDocDemo.vue";
import ScrollRelation from "../../../components/word/ScrollRelation.vue";
import Ws2Http from "../../../components/word/Ws2Http.vue";
import SetPassword2 from "../../../components/word/Api/SetPassword2.vue";
import ExcelOnlyOfficeDemo from "../../../components/excel/ExcelOnlyOfficeDemo.vue";
import Frame from "../../../components/Frame.vue";

import PptOnlyOfficeDemo from "../../../components/ppt/PptOnlyOfficeDemo.vue";
import OnShapeDoubleClick2 from "../../../components/ppt/OnShapeDoubleClick2.vue";

import { ElRow, ElCol } from "element-plus";
import { ref, onMounted } from "vue";

var menuList = [
  {
    title: "",
    children:[
    {
        title: "本地Demo下载",
        children: [
        
          {
            title: "html+vue3+rect",
            script_file: "/demo_script/downloadDemo.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: DownloadDemo,
          }
        ],
      },
    ]
  },
  {
    title: "word",
    children: [
    
      {
        title: "合同模板化",
        children: [
          {
            title: "书签模式",
            script_file: "/demo_script/BookmarkFormDemo.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: BookmarkFormDemo,
          },
          {
            title: "控件模式",
            script_file: "/demo_script/contentControllDemo.js",
            demo_url: "http://47.94.91.67/demo_file/blank.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ContentControllDemo,
          },
        ],
      },
      
      {
        title: "段落相关",
        children: [
          {
            title: "段落锁定-1",
            script_file: "/demo_script/paragraphLock.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ParagraphLock,
          },{
            title: "修订记录",
            script_file: "/demo_script/reviewReport.js",
            demo_url: "http://47.94.91.67/demo_file/reviewReport.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ReviewReport,
          },{
            title: "段落参照",
            script_file: "/demo_script/paragraphMark.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ParagraphMark,
          }
        ],
      },
      {
        title: "常用 Demo",
        children: [
          {
            title: "线下接入",
            script_file: "/demo_script/wordDemo.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
          {
            title: "ws切换为http",
            script_file: "/demo_script/word/ws2http.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: Ws2Http,
          },
          {
            title: "插入文档",
            script_file: "/demo_script/insertFile.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: InsertFile,
          },
          {
            title: "批注",
            script_file: "/demo_script/word/commentsDemo.js",
            demo_url: "http://47.94.91.67/demo_file/html/Comment_demo.html",
            config_type: "desktop",
            config_mode: "view",
            view_com: Frame,
          },
          {
            title: "文档比对",
            script_file: "/demo_script/compare.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "view",
            view_com: Compare,
          },
          {
            title: "双屏滚动",
            script_file: "/demo_script/scrollRelation.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ScrollRelation,
          },
          {
            title: "(伪)隐藏式打印",
            script_file: "/demo_script/word/print.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PrintDocDemo,
          },
          {
            title: "超链点击监听",
            script_file: "/demo_script/word/clickHyperlink.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ClickHyperlinkDemo,
          },
          {
            title: "书签点击监听",
            script_file: "/demo_script/word/clickBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ClickBookmarkDemo,
          },
          {
            title: "光标处插入书签",
            script_file: "/demo_script/word/insertBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: InsertBookmarkDemo,
          },
          {
            title: "缩放",
            script_file: "/demo_script/word/insertBookmark.js",
            demo_url: "http://47.94.91.67/demo_file/BookmarkForm.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: Zoom,
          },
          {
            title: "密码加密",
            script_file: "/demo_script/word/Api/SetPassword2.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: SetPassword2,
          },
          {
            title: "右键菜单",
            script_file: "/demo_script/contextMenu.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ContextMenu,
          },
          {
            title: "工具栏菜单",
            script_file: "/demo_script/toolbarMenu.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ToolbarMenu,
          },{
            title: "手机版",
            script_file: "/demo_script/word/wordMobile.js",
            demo_url: "http://47.94.91.67/demo_file/comment_test.docx",
            config_type: "mobile",
            config_mode: "edit",
            view_com: OnlyOfficeDemo,
          },
        ],
      },
      
    ],
  },
  {
    title: "excel",
    children: [
      {
        title: "在线excel样例",
        children: [
          {
            title: "线下接入",
            script_file: "/demo_script/excel/excelDemo.js",
            demo_url: "http://47.94.91.67/demo_file/demo.xlsx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: ExcelOnlyOfficeDemo,
          },{
            title: "手机版",
            script_file: "/demo_script/excel/excelMobile.js",
            demo_url: "http://47.94.91.67/demo_file/demo.xlsx",
            config_type: "mobile",
            config_mode: "edit",
            view_com: ExcelOnlyOfficeDemo,
          },
        ],
      },
    ],
  },
  {
    title: "ppt",
    children: [
      {
        title: "在线ppt样例",
        children: [
          {
            title: "线下接入",
            script_file: "/demo_script/ppt/pptDemo.js",
            demo_url: "http://47.94.91.67/demo_file/demo.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: PptOnlyOfficeDemo,
          }
        ],
      },
      {
        title: "常用Demo",
        children: [
          {
            title: "鼠标双击监听",
            script_file: "/demo_script/ppt/onShapeDoubleClick2.js",
            demo_url: "http://47.94.91.67/demo_file/mathImage.pptx",
            config_type: "desktop",
            config_mode: "edit",
            view_com: OnShapeDoubleClick2,
          }
        ],
      },
    ],
  },
];
var typeColor = {
  word: "rgb(41, 114, 244)",
  excel: "rgb(49, 155, 98)",
  ppt: "rgb(255, 156, 153)",
};
var currentDemoScriptUrl = ref("");
var currentDemoUrl = ref("");
var currentConfigType = ref("");
var currentConfigMode = ref("");
var currentViewCom = ref("");
var refreshDemo = function (
  scriptFileUrl,
  demoFileUrl,
  configType,
  configMode,
  viewCom
) {
  currentDemoScriptUrl.value = scriptFileUrl;
  currentDemoUrl.value = demoFileUrl;
  currentConfigType.value = configType;
  currentConfigMode.value = configMode;
  currentViewCom.value = viewCom;
};

onMounted(() => {
  refreshDemo(
    menuList[0]?.children[0].children[0]["script_file"],
    menuList[0]?.children[0].children[0]["demo_url"],
    menuList[0]?.children[0].children[0]["config_type"],
    menuList[0]?.children[0].children[0]["config_mode"],
    menuList[0]?.children[0].children[0]["view_com"]
  );
});
</script>

<template>
  <el-row class="mian_container">
    <el-col :span="3" style="height: 100%">
      <aside class="VPSidebar" style="height: 100%">
        <nav class="VPSidebarNav">
          <div v-for="menuItem in menuList">
            <div
              class="type_container"
              :style="{ background: typeColor[menuItem.title] }"
            >
              {{ menuItem.title }}
            </div>
            <div class="group" v-for="groupItem in menuItem.children">
              <section class="VPSidebarGroup">
                <div class="title">
                  <h2 class="title-text">{{ groupItem.title }}</h2>
                </div>
                <span
                  v-for="demoItem in groupItem.children"
                  class="link"
                  :class="{
                    active: currentDemoScriptUrl == demoItem.script_file,
                  }"
                  @click="
                    refreshDemo(
                      demoItem.script_file,
                      demoItem.demo_url,
                      demoItem.config_type,
                      demoItem.config_mode,
                      demoItem.view_com
                    )
                  "
                  ><p class="link-text">{{ demoItem.title }}</p></span
                >
              </section>
            </div>
            <div
              style="height: 20px; width: 100%; background-color: f0f0f0"
            ></div>
          </div>
        </nav>
      </aside>
    </el-col>
    <el-col :span="21" style="height: 100%">
      <!-- <OnlyOfficeDemo
        v-model:script-url="currentDemoScriptUrl"
        v-model:demo-file-url="currentDemoUrl"
        v-model:demo-config-type="currentDemoUrl"
        v-model:demo-config-mode="currentDemoUrl"
        ref="pageRef"
      ></OnlyOfficeDemo> -->
      <component
        :is="currentViewCom"
        v-model:script-url="currentDemoScriptUrl"
        v-model:demo-file-url="currentDemoUrl"
        v-model:demo-config-type="currentConfigType"
        v-model:demo-config-mode="currentConfigMode"
        ref="pageRef"
        style="height: 100%"
      ></component>
    </el-col>
  </el-row>
</template>
<style scoped>
.VPSidebar {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0px 32px 96px;
  height: 80%;
}
.VPSidebarNav {
  padding-top: 24px;
  outline: 0px;
  display: block;
  unicode-bidi: isolate;
}
.VPSidebar .group {
  padding-top: 16px;
}
.group + .group {
}
.VPSidebarGroup {
}
.VPSidebarGroup .title {
}
.VPSidebarGroup .title .title-text {
  line-height: 20px;
  font-size: 15px;
  font-weight: bold;
  color: #213547;
  transition: color 0.5s;
}
.VPSidebarGroup .link .link-text {
  line-height: 25px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(60, 60, 60, 0.7);
  transition: color 0.5s;
}
.link.active .link-text {
  font-weight: 600;
  color: #42b883;
  transition: color 0.25s;
}
.type_container {
  display: block;
  width: 100%;
  line-height: 40px;
  font-size: 20px;
  font-weight: 600;
  transition: color 0.5s;
  color: #ffffff;
  text-align: center;
}
.type_container + .type_container {
  padding-top: 16px;
}
.mian_container {
  height: calc(100vh - 88px);
}
</style>
